<script setup lang="ts">
  import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { ref, h, reactive, computed } from 'vue';
  import eChart from '/@/components/e-chart.vue';

  const expandedKeys = ref(['2']);
  const selectedKeys = ref([]);

  const option = ref({
    title: {
      text: '能流图',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        return `${params.data.source} → ${params.data.target}<br/>${params.data.value} kWh`;
      },
    },
    series: [
      {
        type: 'sankey',
        data: [
          { name: '总输入电能' },
          { name: 'G04 1#变压器进线' },
          { name: '2#变压器进线' },
          { name: '配电线路损耗' },
          { name: '配电线路输出' },
          { name: '4#楼总' },
          { name: '4#楼消耗' },
          { name: '4#楼损耗' },
          { name: '3#楼总' },
          { name: '3#楼消耗' },
          { name: '3#楼损耗' },
          { name: 'G05 2#变压器进线' },
          { name: '3#变压器进线' },
          { name: '1#楼空压机' },
          { name: '1#楼空压机消耗' },
          { name: '1#楼空压机损耗' },
          { name: '2#楼总' },
          { name: '2#楼消耗' },
          { name: '2#楼损耗' },
          { name: 'G06 3#变压器进线' },
          { name: '4#变压器进线' },
          { name: '其他楼层' },
          { name: '其他楼层消耗' },
          { name: '其他楼层损耗' },
        ],
        links: [
          { source: '总输入电能', target: 'G04 1#变压器进线', value: 7000 },
          { source: '总输入电能', target: 'G05 2#变压器进线', value: 5000 },
          { source: '总输入电能', target: 'G06 3#变压器进线', value: 3000 },
          { source: 'G04 1#变压器进线', target: '2#变压器进线', value: 7000 },
          { source: '2#变压器进线', target: '配电线路损耗', value: 1000 },
          { source: '2#变压器进线', target: '配电线路输出', value: 6000 },
          { source: '配电线路输出', target: '4#楼总', value: 3200 },
          { source: '4#楼总', target: '4#楼消耗', value: 3000 },
          { source: '4#楼总', target: '4#楼损耗', value: 200 },
          { source: '配电线路输出', target: '3#楼总', value: 2700 },
          { source: '3#楼总', target: '3#楼消耗', value: 2500 },
          { source: '3#楼总', target: '3#楼损耗', value: 200 },
          { source: 'G05 2#变压器进线', target: '3#变压器进线', value: 5000 },
          { source: '3#变压器进线', target: '配电线路损耗', value: 500 },
          { source: '3#变压器进线', target: '配电线路输出', value: 4500 },
          { source: '配电线路输出', target: '1#楼空压机', value: 2200 },
          { source: '1#楼空压机', target: '1#楼空压机消耗', value: 2000 },
          { source: '1#楼空压机', target: '1#楼空压机损耗', value: 200 },
          { source: '配电线路输出', target: '2#楼总', value: 2600 },
          { source: '2#楼总', target: '2#楼消耗', value: 2500 },
          { source: '2#楼总', target: '2#楼损耗', value: 100 },
          { source: 'G06 3#变压器进线', target: '4#变压器进线', value: 3000 },
          { source: '4#变压器进线', target: '配电线路损耗', value: 0 },
          { source: '4#变压器进线', target: '配电线路输出', value: 3000 },
          { source: '配电线路输出', target: '1#楼总', value: 1600 },
          { source: '1#楼总', target: '1#楼消耗', value: 1500 },
          { source: '1#楼总', target: '1#楼损耗', value: 100 },
          { source: '配电线路输出', target: '其他楼层', value: 1000 },
          { source: '其他楼层', target: '其他楼层消耗', value: 1000 },
          { source: '其他楼层', target: '其他楼层损耗', value: 0 },
        ],
        label: {
          color: 'rgba(0, 0, 0, 1)',
        },
        emphasis: {
          focus: 'adjacency',
        },
      },
    ],
  });

  const treeData = ref([
    {
      title: '总输入电能：15000 kWh',
      key: '1',
      children: [
        {
          title: 'G04 1#变压器进线：7000 kWh',
          key: '1-1',
          children: [
            {
              title: '2#变压器进线：7000 kWh',
              key: '1-1-1',
              children: [
                {
                  title: '配电线路损耗：1000 kWh',
                  key: '1-1-1-1',
                },
                {
                  title: '配电线路输出：6000 kWh',
                  key: '1-1-1-2',
                  children: [
                    {
                      title: '4#楼总：3200 kWh',
                      key: '1-1-1-2-1',
                      children: [
                        {
                          title: '4#楼消耗：3000 kWh',
                          key: '1-1-1-2-1-1',
                        },
                        {
                          title: '4#楼损耗：200 kWh',
                          key: '1-1-1-2-1-2',
                        },
                      ],
                    },
                    {
                      title: '3#楼总：2700 kWh',
                      key: '1-1-1-2-2',
                      children: [
                        {
                          title: '3#楼消耗：2500 kWh',
                          key: '1-1-1-2-2-1',
                        },
                        {
                          title: '3#楼损耗：200 kWh',
                          key: '1-1-1-2-2-2',
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          title: 'G05 2#变压器进线：5000 kWh',
          key: '1-2',
          children: [
            {
              title: '3#变压器进线：5000 kWh',
              key: '1-2-1',
              children: [
                {
                  title: '配电线路损耗：500 kWh',
                  key: '1-2-1-1',
                },
                {
                  title: '配电线路输出：4500 kWh',
                  key: '1-2-1-2',
                  children: [
                    {
                      title: '1#楼空压机：2200 kWh',
                      key: '1-2-1-2-1',
                      children: [
                        {
                          title: '1#楼空压机消耗：2000 kWh',
                          key: '1-2-1-2-1-1',
                        },
                        {
                          title: '1#楼空压机损耗：200 kWh',
                          key: '1-2-1-2-1-2',
                        },
                      ],
                    },
                    {
                      title: '2#楼总：2600 kWh',
                      key: '1-2-1-2-2',
                      children: [
                        {
                          title: '2#楼消耗：2500 kWh',
                          key: '1-2-1-2-2-1',
                        },
                        {
                          title: '2#楼损耗：100 kWh',
                          key: '1-2-1-2-2-2',
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          title: 'G06 3#变压器进线：3000 kWh',
          key: '1-3',
          children: [
            {
              title: '4#变压器进线：3000 kWh',
              key: '1-3-1',
              children: [
                {
                  title: '配电线路损耗：0 kWh',
                  key: '1-3-1-1',
                },
                {
                  title: '配电线路输出：3000 kWh',
                  key: '1-3-1-2',
                  children: [
                    {
                      title: '1#楼总：1600 kWh',
                      key: '1-3-1-2-1',
                      children: [
                        {
                          title: '1#楼消耗：1500 kWh',
                          key: '1-3-1-2-1-1',
                        },
                        {
                          title: '1#楼损耗：100 kWh',
                          key: '1-3-1-2-1-2',
                        },
                      ],
                    },
                    {
                      title: '其他楼层：1000 kWh',
                      key: '1-3-1-2-2',
                      children: [
                        {
                          title: '其他楼层消耗：1000 kWh',
                          key: '1-3-1-2-2-1',
                        },
                        {
                          title: '其他楼层损耗：0 kWh',
                          key: '1-3-1-2-2-2',
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    },
  ]);

  const topColumns = [
    { title: '数据源', dataIndex: 'source', key: 'source', width: 180, align: 'center' },
    { title: '数值(kWh)', dataIndex: 'value', key: 'value', align: 'center' },
  ];

  const topTableData = ref([
    {
      source: 'G04 1#变压器进线',
      value: '7000',
    },
    {
      source: 'G05 2#变压器进线',
      value: '5000',
    },
    {
      source: 'G06 3#变压器进线',
      value: '3000',
    },
  ]);

  const topTotals = computed(() => {
    let total = 0;

    topTableData.value.forEach(({ source, value }) => {
      total += Number(value);
    });
    return { total };
  });

  const midColumns = [
    { title: '配电线路', dataIndex: 'line', key: 'line', width: 180, align: 'center' },
    { title: '上级来源', dataIndex: 'higher', key: 'higher', align: 'center' },
    { title: '输入电能(kWh)', dataIndex: 'input', key: 'input', align: 'center' },
    { title: '输出电能(kWh)', dataIndex: 'output', key: 'output', align: 'center' },
    { title: '损耗(kWh)', dataIndex: 'loss', key: 'loss', align: 'center' },
    { title: '损耗率(%)', dataIndex: 'rate', key: 'rate', align: 'center' },
  ];

  const midTableData = ref([
    {
      line: '2#变压器进线',
      higher: 'G04 1#变压器进线',
      input: '7000',
      output: '6000',
      loss: '1000',
      rate: '14.29%',
    },
    {
      line: '3#变压器进线',
      higher: 'G05 2#变压器进线',
      input: '5000',
      output: '4500',
      loss: '500',
      rate: '10.00%',
    },
    {
      line: '4#变压器进线',
      higher: 'G06 3#变压器进线',
      input: '3000',
      output: '3000',
      loss: '0',
      rate: '0.00%',
    },
  ]);

  const midTotals = computed(() => {
    let totalInput = 0;
    let totalOutput = 0;
    let totalLoss = 0;
    let totalRate = 0;

    midTableData.value.forEach(({ input, output, loss }) => {
      totalInput += Number(input);
      totalOutput += Number(output);
      totalLoss += Number(loss);
    });
    totalRate = ((totalLoss / totalInput) * 100).toFixed(2) + '%';
    return { totalInput, totalOutput, totalLoss, totalRate };
  });

  const bottomColumns = [
    { title: '楼层', dataIndex: 'floor', key: 'floor', width: 180, align: 'center' },
    { title: '上级来源', dataIndex: 'higher', key: 'higher', align: 'center' },
    { title: '输入电能(kWh)', dataIndex: 'input', key: 'input', align: 'center' },
    { title: '输出电能(kWh)', dataIndex: 'output', key: 'output', align: 'center' },
    { title: '损耗(kWh)', dataIndex: 'loss', key: 'loss', align: 'center' },
    { title: '损耗率(%)', dataIndex: 'rate', key: 'rate', align: 'center' },
  ];

  const bottomTableData = ref([
    {
      floor: '4#楼总',
      higher: '2#变压器进线',
      input: '3400',
      output: '3200',
      loss: '200',
      rate: '6.25%',
    },
    {
      floor: '3#楼总',
      higher: '2#变压器进线',
      input: '2700',
      output: '2500',
      loss: '200',
      rate: '7.41%',
    },
    {
      floor: '1#楼空压机',
      higher: '3#变压器进线',
      input: '2200',
      output: '2000',
      loss: '200',
      rate: '9.09%',
    },
    {
      floor: '2#楼总',
      higher: '3#变压器进线',
      input: '2600',
      output: '2500',
      loss: '100',
      rate: '3.85%',
    },
    {
      floor: '1#楼总',
      higher: '4#变压器进线',
      input: '1600',
      output: '1500',
      loss: '100',
      rate: '6.25%',
    },
    {
      floor: '其他楼层',
      higher: '4#变压器进线',
      input: '1000',
      output: '1000',
      loss: '0',
      rate: '0.0%',
    },
  ]);

  const bottomTotals = computed(() => {
    let totalInput = 0;
    let totalOutput = 0;
    let totalLoss = 0;
    let totalRate = 0;

    bottomTableData.value.forEach(({ input, output, loss }) => {
      totalInput += Number(input);
      totalOutput += Number(output);
      totalLoss += Number(loss);
    });
    totalRate = ((totalLoss / totalInput) * 100).toFixed(2) + '%';
    return { totalInput, totalOutput, totalLoss, totalRate };
  });
</script>

<template>
  <div class="container">
    <a-row :gutter="16">
      <a-col :span="24">
        <div class="tree">
          <a-card>
            <div class="chart">
              <eChart :option="option" name="option" />
            </div>
          </a-card>
        </div>
      </a-col>
      <a-col :span="24">
        <a-row :gutter="[0, 10]">
          <a-col :span="24">
            <a-card title="总输入电能">
              <a-table :columns="topColumns" :data-source="topTableData" rowKey="id">
                <template #summary>
                  <a-table-summary>
                    <a-table-summary-row>
                      <a-table-summary-cell> <a-typography-text>总计</a-typography-text></a-table-summary-cell>
                      <a-table-summary-cell>
                        <a-typography-text>{{ topTotals.total }}</a-typography-text>
                      </a-table-summary-cell>
                    </a-table-summary-row>
                  </a-table-summary>
                </template>
              </a-table>
            </a-card>
          </a-col>
          <a-col :span="24">
            <a-card title="配电线路分配和损耗">
              <a-table :columns="midColumns" :data-source="midTableData" rowKey="id">
                <template #summary>
                  <a-table-summary>
                    <a-table-summary-row>
                      <a-table-summary-cell> <a-typography-text>总计</a-typography-text></a-table-summary-cell>
                      <a-table-summary-cell> <a-typography-text></a-typography-text></a-table-summary-cell>
                      <a-table-summary-cell>
                        <a-typography-text>{{ midTotals.totalInput }}</a-typography-text>
                      </a-table-summary-cell>
                      <a-table-summary-cell>
                        <a-typography-text>{{ midTotals.totalOutput }}</a-typography-text>
                      </a-table-summary-cell>
                      <a-table-summary-cell>
                        <a-typography-text>{{ midTotals.totalLoss }}</a-typography-text>
                      </a-table-summary-cell>
                      <a-table-summary-cell>
                        <a-typography-text>{{ midTotals.totalRate }}</a-typography-text>
                      </a-table-summary-cell>
                    </a-table-summary-row>
                  </a-table-summary>
                </template>
              </a-table>
            </a-card>
          </a-col>

          <a-col :span="24">
            <a-card title="各楼层消耗和损耗">
              <a-table :columns="bottomColumns" :data-source="bottomTableData" rowKey="id">
                <template #summary>
                  <a-table-summary>
                    <a-table-summary-row>
                      <a-table-summary-cell> <a-typography-text>总计</a-typography-text></a-table-summary-cell>
                      <a-table-summary-cell> <a-typography-text></a-typography-text></a-table-summary-cell>
                      <a-table-summary-cell>
                        <a-typography-text>{{ bottomTotals.totalInput }}</a-typography-text>
                      </a-table-summary-cell>
                      <a-table-summary-cell>
                        <a-typography-text>{{ bottomTotals.totalOutput }}</a-typography-text>
                      </a-table-summary-cell>
                      <a-table-summary-cell>
                        <a-typography-text>{{ bottomTotals.totalLoss }}</a-typography-text>
                      </a-table-summary-cell>
                      <a-table-summary-cell>
                        <a-typography-text>{{ bottomTotals.totalRate }}</a-typography-text>
                      </a-table-summary-cell>
                    </a-table-summary-row>
                  </a-table-summary>
                </template>
              </a-table>
            </a-card>
          </a-col>

          <a-col :span="24">
            <a-card title="总结">
              <div class="summary">
                <div class="a"><span class="labels">1.总输入电能：</span>{{ topTotals.total }}kWh，从三个变压器进线输入。</div>
                <div>
                  <span class="labels">2.配电线路分配和损耗：</span>
                  <span
                    ><div class="dot"></div>
                    配电线路的总输出电能为{{ midTotals.totalOutput }}kWh，损耗{{ midTotals.totalLoss }}kWh。</span
                  >
                </div>
                <div>
                  <span class="labels">3.各楼层消耗和损耗：</span>
                  <span
                    ><div class="dot"></div>
                    楼层的总消耗电能为{{ bottomTotals.totalOutput }}kWh，总损耗{{ bottomTotals.totalLoss }}kWh。</span
                  >
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
  .chart {
    height: 500px;
  }
  .tree {
    height: 100%;
    .ant-card {
      /* min-height: 1500px; */
      height: 100%;
    }
  }

  :deep(.ant-table-summary) {
    .ant-typography {
      display: flex;
      justify-content: center;
      font-weight: 700;
    }
  }

  .summary {
    font-size: 18px;

    .a {
      display: flex;
    }
    .labels {
      font-weight: 700;
    }
    .dot {
      background-color: #000;
      width: 5px;
      height: 5px;
      border-radius: 5px;
      margin: 0 10px;
    }
    span {
      display: flex;
      align-items: center;
    }
  }
</style>
